<script setup>
import {ref} from "vue"
import Bcheckbox from "../../components/form/checkbox/Bcheckbox.vue";
import {handoff_next} from "../../tools/theme";
import UniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue";
import {getCommunityList, getUserAvatar, putUserAvatar, putUserInfo} from "../../api/user/user";
import {baseUrl} from "../../api/http";
import {getUserId} from "../../store";
import {goHome} from "../../tools/go";
const form = ref({
  id: getUserId(),
  userNick: "",
  userSex: 1,
  isSun: false,
  userEmail: "",
  communityId: "",
  community: null,
  userBirthDate: "",
  updateBy: getUserId(),
  userEmailRule:[
      value => {
        if (!value) return '请输入邮箱'
        return true
      },
      value => {
        if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
          return '请输入正确的邮箱'
        }
      }
  ],
  nickNameRule: [
      value => {
        if (!value) return '请输入昵称'
        return true
      },
  ],
  pstatus:false
})

const curWindow = ref(1)

const step = ref(25)


const next = () => {
  curWindow.value++
  step.value += 25
}

const prev = () => {
  curWindow.value--
  step.value -= 25
}

const sexChange = (e) => {
  form.value.userSex = e.detail.value
}




const subForm = () => {
  form.value.pstatus = true
  form.value.isSun = form.value.isSun ? 1 : 0;
  putUserInfo(form.value).then(res => {
      form.value.pstatus = false
      if (res.code === 200) {
        goHome()
      }
  })
}

const communityPage = ref({
  page: 1,
  size: 10
})

const community = ref([])

const communityList = () => {

  getCommunityList(communityPage.value).then(res => {

    community.value = res.data["records"]
    community.value.unshift({
      communityName:'请选择小区',
      key:0,
      propertyId:0
    })
    form.value.communityId = {
      communityName:'请选择小区',
      key:0,
      propertyId:0
    };
    //console.log(community.value);
  })
}

const communityName = (e) => {
  for (let i = 0; i < community.value.length; i++) {
    if (community.value[i].key === e) {
      form.value.community = community.value[i].communityName
    }
  }
}

const userAvatar = ref("");

const UserAvatar = () => {
  getUserAvatar().then(res => {
    userAvatar.value = res.data
  })
}

const putAvatar = () => {
  const formData = new FormData()

  let input = document.createElement("input");
  input.type = "file";
  input.accept = "image/png";
  input.onchange = function (e) {
    let file = e.target.files[0];
    formData.append("img", file)
    putUserAvatar(formData).then(res => {
      if (res.code === 200) {
        userAvatar.value = baseUrl + res.data
      }
    })
  }

  input.click()

}

const init = () => {
  communityList()
  UserAvatar()
}
init()
</script>


<style scoped lang="scss">
@use "../../static/css/main";
:deep(#input-9) {
  opacity: 0;
}


.header{
  height: 20vh;
  padding: 20vw 10vw;
  font-size: 10vw;
}
.b_h3{
  padding: 10px 0;
}

.back {
  @include main.useTheme {
    background-color: main.getVal("primary_bg_color");
  }
  :deep .v-input--density-default .v-field__input{
    border:none;
  }
  :deep .v-input--density-default .v-field__input [id^="input-"] {
    display: none;
  }

}
.logo {
  text {
    font-size: 30px;
    color: #E07320;
  }
  img{
    width:100px;
  }
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}
.submit {
  margin: 25px auto;
  width: 80%;
  height: 40px;
  border-radius: 15px;
  text-align: center;
  line-height: 40px;
  color: #FFFFFF;
  font-size: 20px;
  background: #E07320;
}
</style>


<template>
<view class="back">
  <v-progress-linear :model-value="step" :indeterminate="form.pstatus" stream color="#2195f1"></v-progress-linear>

  <view class="logo">
    <img src="../../static/img/logo.png" alt="">
    <text>安家社区</text>
  </view>

  <v-window touch v-model="curWindow">
    <v-window-item :value="1">
      <v-container>
        <v-row>
          <v-col>
            <h3>你好！请您完善信息：</h3>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <bcheckbox v-model="form.isSun" label="党员"></bcheckbox>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <radio-group @change="sexChange" >
              <radio value="1">男</radio>
              <radio value="0">女</radio>
            </radio-group>
          </v-col>
        </v-row>
        <!--
        <v-row>
          <v-col>
            <v-text-field
                v-model="form.userNick"
                label="请输入你的昵称"
            ></v-text-field>
          </v-col>
        </v-row>
        -->

        <v-row>
          <v-col>
            <v-select
                :items="community"
                item-title="communityName"
                item-value="key"
                v-model="form.communityId"
                @update:modelValue="communityName"

            />
          </v-col>
        </v-row>

        <v-row justify="space-between">
          <v-col>
            <v-btn block @click="subForm" class="submit" >完成</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-window-item>
   <!--
     <v-select
    v-model="select"
    :hint="`${select.state}, ${select.abbr}`"
    :items="items"
    item-title="state"
    item-value="abbr"
    label="Select"
    persistent-hint
    return-object
    single-line
  ></v-select>
   <v-window-item :value="1">
        <v-container height="500">

          <v-row>
            <v-col>
              <h3>你叫什么名字</h3>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-text-field
                  v-model="form.userNick"
                label="请输入你的昵称"
              ></v-text-field>
            </v-col>
          </v-row>

          <v-row justify="space-between">
            <v-col>

            </v-col>
            <v-col>

            </v-col>
            <v-col>
                <v-btn @click="next" :disabled="form.userNick.length <= 0">下一步</v-btn>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <h3>我该怎么称呼你？</h3>
            </v-col>
          </v-row>
        </v-container>
    </v-window-item>

    <v-window-item :value="2">
      <v-container height="500">

        <v-row>
          <v-col>
            <h3>换一个头像更有辨识度?</h3>
          </v-col>
        </v-row>

        <v-row >
          <v-col>
            <v-avatar @click="putAvatar" :image="baseUrl + userAvatar" size="80"></v-avatar>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <h3>你好！{{form.userNick}}，你是哪个小区的？</h3>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <v-select
              label="请选择你的小区"
              :items="community"
              item-title="communityName"
              item-value="key"
              v-model="form.communityId"
              @update:modelValue="communityName"
            />
          </v-col>
        </v-row>

        <v-row>
          <v-col>
              <v-btn @click="prev">想换一个昵称，返回！</v-btn>
          </v-col>

          <v-col>

          </v-col>

          <v-col>
            <v-btn @click="next">下一步</v-btn>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <h3>让其他人认识一下吧</h3>
          </v-col>
        </v-row>
      </v-container>
    </v-window-item>

    <v-window-item :value="3">
      <v-container>
        <v-row>
          <v-col>
            <h3>{{form.userNick}}，怎么联系你？</h3>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <v-text-field
                :rules="form.userEmailRule"
                v-model="form.userEmail"
                label="请输入你的邮箱 "
            ></v-text-field>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <h3>你的身份是？</h3>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
              <bcheckbox v-model="form.isSun" label="党员"></bcheckbox>
          </v-col>

          <v-col>
            <radio-group @change="sexChange" >
              <radio value="1">男</radio>
              <radio value="0">女</radio>
            </radio-group>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <h3>出生日期？</h3>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <uni-datetime-picker
              v-model="form.userBirthDate"
              type="date"
            />
          </v-col>
        </v-row>

        <v-row justify="space-between">
          <v-col>
            <v-btn @click="prev">我选错小区了！重选</v-btn>
          </v-col>

          <v-col>

          </v-col>

          <v-col>
            <v-btn @click="next">下一步</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-window-item>

    <v-window-item :value="4">
      <v-container height="500">

        <v-row>
          <v-col>
            <h3>{{form.userNick}}，你的信息</h3>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <v-card>
              <v-card-text>

                <v-row justify="center" align-content="center">
                  <v-col>
                    <v-avatar :image="baseUrl + userAvatar" size="64"></v-avatar>
                  </v-col>
                </v-row>

                <v-row>
                  <v-col v-if="form.isSun">
                    昵称：<v-badge color="red" floating content="党员">{{form.userNick}}</v-badge>
                  </v-col>

                  <v-col v-else>
                    昵称：{{form.userNick}}
                  </v-col>
                </v-row>

                <v-row>
                  <v-col>
                    性别：{{form.userSex === '1' ? '男' : '女'}}
                  </v-col>
                </v-row>

                <v-row>
                  <v-col>
                    小区：{{form.community}}
                  </v-col>
                </v-row>

                <v-row>
                  <v-col>
                    出生日期：{{form.userBirthDate}}
                  </v-col>
                </v-row>


                <v-row>
                  <v-col>
                    邮箱：{{form.userEmail}}
                  </v-col>
                </v-row>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>

        <v-row>
          <v-col>
            <v-btn @click="prev">写错信息了！重来</v-btn>
          </v-col>

          <v-col>
          </v-col>

          <v-col>
            <v-btn @click="subForm">就是这些</v-btn>
          </v-col>

        </v-row>
      </v-container>
    </v-window-item> -->
  </v-window>
  <!--
  <v-container>
    <v-speed-dial
        location="bottom center"
        transition="fade-transition"
    >
      <template v-slot:activator="{ props: activatorProps }">
        <v-fab
            v-bind="activatorProps"
            size="large"
            icon="$vuetify"
        ></v-fab>
      </template>

      <v-btn key="1" icon="$success"></v-btn>
      <v-btn key="2" @click="handoff_next" icon="$info"></v-btn>
      <v-btn key="3" icon="$warning"></v-btn>
      <v-btn key="4" icon="$error"></v-btn>
    </v-speed-dial>
  </v-container>
  -->

</view>
</template>

